<template lang="html">
  <div class="order-list">



    <mt-loadmore :top-method="loadTop" 
      :bottom-method="loadBottom" 
      :bottom-all-loaded="allLoaded" 
      :autoFill="false"
      ref="loadmore" >
      <ul class="orders">
        <li v-for="(item, index) in order_list"
          :key="index">
          <p class="status">
            <span class="title">状态</span>：{{ item.order_status }}
          </p>
          <p class="price">
            <span class="title">总价</span>：￥{{ item.order_amount }}
          </p>

          <ul class="order-items">
            <li class="flex" v-for="(good_item, good_index) in item.goods"
              :key="good_index">
              <img v-lazy="good_item.goods_img" alt="">
              <div class="content flex">
                <p class="description">{{ good_item.goods_name }}</p>
                <p class="specifications flex" style="justify-content: space-between;margin-bottom: 2vh;">
                  <span>{{ good_item.goods_sn }}</span>
                  <span>x{{ good_item.goods_number }}</span>
                </p>
              </div>
            </li>
          </ul>
        </li>

      </ul>
    </mt-loadmore>



  </div>

</template>

<script>
// import { getUserCaptial } from '@/api/user'
import { Toast } from 'mint-ui'
import { getOrderList } from  '@/api/order'

export default {
  name: 'orderList',
  props: {
    status: {
      default: 'all'
    }
  },
  data(){
    return {
      selected_status: 'all',

      order_list: [],
      page: 1,
      total: 0,

      allLoaded: false,

    }
  },
  mounted () {

    this._getOrderList()

    // getUserCaptial().then(res => {
    //   if (res.code === 1) {
    //     this.userData = res.data
    //   } else {
    //     Toast(res.message)
    //   }
    // })
  },
  methods: {
    loadTop(){
      // 加载更多数据
      // ...
      // console.log('下拉刷新')
      this.page = 1
      this._getOrderList()


      this.$refs.loadmore.onTopLoaded();
    },
    loadBottom(){
      // 加载更多数据
      // ...
      // console.log('上拉加载下一页')
      this.page ++
      this._getOrderList()

      // this.allLoaded = true;// 若数据已全部获取完毕
      this.$refs.loadmore.onBottomLoaded();
    },


    _getOrderList() {
      let params = {
        page: this.page,
        status: this.selected_status,
      }
      getOrderList(params).then(res => {
        if (res.code === 1) {
          if(res.data){
            if(this.page == 1){
              this.order_list = res.data.list
            }
            else{
              this.order_list = [...this.order_list, ...res.data.list]
            }
            this.page = res.data.page
            this.total = res.data.total
          }
        } else {
          Toast(res.message)
        }
      })
    },
    
  },

}
</script>

<style lang="less" scoped>

  .order-list{
    width: 100%;
    font-size: 3.2vw;
    height: 80vh;
    overflow: scroll;

    div, ul, li, span, a{
      box-sizing: border-box;
    }

    .flex{
      display: -ms-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    ul.orders{
      background-color: rgb(235,236,237);

      >li{
        margin-bottom: 1.5vh;
        padding: 2vh 2vw;
        background-color: #fff;
        box-shadow: 0 0.06vh 0.1vh 0.05vh #ccc;

        .title{
          color: #ccc;
        }


        .status{
          margin-bottom: 1vh;
          
        }

        .price{
          margin-bottom: 1vh;
          
        }

      }
      
      ul.order-items{
        
        >li{

          img{
            width: 25vw;
            height: 25vw;
            margin-right: 2.5vw;


          }

          .content{
            flex: 0.8;
            flex-direction: column;
            justify-content: space-between;


            .description{
              margin-bottom: 1vh;
            }

            .specifications{
              font-size: 2.8vw;

              >span{
                color: #ccc;
              }
              
            }
          }
        }
      }
    }

  }
 
</style>
